<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.administration.constants.AdminConstants"%>

<script>
	$(function(){
		$("button").button();	
	})
	
	$("#rolesTable").tablesorter({
		widgets:['zebra']
	})
	
	function addRole(){
		var text = document.getElementById('newRole').value;
		var select = document.getElementById('rolesSelect');
		
		if(text!=null && text!=""){
			select.options[select.options.length] = new Option(text);
			document.getElementById('newRole').value = null;
		}
	}
	
	$("#newRole").keyup(function(event){
		if(event.keyCode == 13){
			$("#addRole").click();
		}
	});
	
	function removeRole(){
		$("#rolesSelect option").each(function(){
			if(this.selected){
				$(this).remove();
			}
		});
	}
	
	function clearAllRoles(){
		$('#rolesSelect >option').remove();
	}
	
	function submitRoles(){
		var index = 0;
		var list = '';
		$("#rolesSelect option").each(function(){
			if(index++>0){
				list+='~';
			}
			list+=$(this)[0].value;
		});
		
		$("#rolesList").val(list);
		alert(list);
		//document.forms["newRolesForm"].submit();
	}
	
</script>

<%
	List<Roles> allRoles = (List)session.getAttribute("allRolesInDB");
%>

<div style="width:100%">
	<div class="containerSmall" style="width:45%; margin-top:10px; float:left; background-color: #ffffff">
		<div class="pageTitle" style="text-align:center; font-weight:bold;">
			Current roles available in the Database
		</div>
		<table id="rolesTable" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
			<thead>
				<tr>
					<th style="width:15%">Role ID</th>
					<th>Role name</th>
				</tr>
			</thead>
			<tbody>
				<%for(int i=0; i<allRoles.size(); i++){ 
					Roles role = allRoles.get(i);%>
					<tr>
						<td style="text-align:center"><%=role.getId() %></td>
						<td><%=role.getRole() %></td>
					</tr>
				<%} %>
			</tbody>
		</table>
	</div>
	<div class="containerSmall" style="width:45%; float:left; margin-left:5%; margin-top:10px;">
		<div class="pageTitle" style="text-align:center; font-weight:bold">
			Add another role into the database
		</div>
		<div style="margin-top:10px; font-weight:bold">
			Define new role:
		</div>
		<input class="regInput" id="newRole" name="newRole" style=" width:100%; margin-top:5px;"/>
		<button id="addRole" name="addRole" onclick="addRole()" style="width:40%; margin-top:10px; font-weight:bold">Add role</button>
		
		<div style="margin-top:20px; font-weight:bold">
			New roles list:
		</div>
		<select class="regInput" name="rolesSelect" id="rolesSelect" size="5" style="width:100%; margin-top:5px"></select>
		<div id="rolesButtons" style="width:100%; margin-top: 5px; font-size:x-small;">
			<button id="removeRole" name="removeRole" onclick="removeRole()" style="width:30%; font-weight: bold; float:left;">Remove role</button>
			<button id="clearAllRoles" name="clearAllRoles" onclick="clearAllRoles()" style="width:30%; font-weight:bold; margin-left:5%">Clear all roles</button>
			<button id="submitRoles" name="submitRoles" onclick="submitRoles()" style="width:30%; font-weight:bold; float:right">Submit new roles</button>
		</div>
		<div style="clear:both"></div>
	</div>
	<div style="clear:both"></div>
	<form name="newRolesForm" action="/proddev/controller" method="post" style="margin:0">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ADMIN_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=AdminConstants.ADD_ROLES%>"/>
		<input type="hidden" name="rolesList" id="rolesList">
	</form>
</div>